<template>
  <div class="page fa-page">
    <div class="banner">
    </div>
    <div class="container">
      <div class="step-process">
        <div class="step" :class="currentStep == index+1?'current-step':''" v-for="(item,index) in plainData" :key="index">
          <label class="step-num">{{item.index}}</label>
          <div class="title">{{item.name}}</div>
          <a class="circle" @mouseenter="enter(index)"></a>
          <div class="active-title energized">{{item.name}}</div>
        </div>
      </div>
      <div class="mySwiper" ref="mySwiper" v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="content swiper-slide">
            <div>
              <div class="current-num">1</div>
              <p>在进行生涯规划的第一阶段，就是全方位认识自己。一方面，只有从认识自己开始，将注意力先集中在决策者，即我自己身上，才能意识到为整个生涯负责任的人就是我自己，才会充分重视生涯决策。另一方面，从了解自身开始生涯规划的过程，相对比较容易，可以快速找到突破口，进入生涯规划的轨道中；不至于一开始就像只无头苍蝇，不知道从哪里入手。</p>
              <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step01.png" alt="">
              <p>所谓能力，不只是自己现阶段已经掌握哪些技能，能够做哪些事；更包括自己待开发的潜能。可能我现在不擅长与人沟通、交流，但经过一段时间的训练后，我能够无障碍、快速、有效地跟人交流。往往，我们很容易列出自己已经拥有的技能，却避而不谈自己的不足之处，或者仅仅将这些归为自己的弱势项；其实这不利于深度认知自己，也不利于发展、完善自己，正确的做法是思考如何改善不足，将拖后腿的缺点列入自己的潜藏能力里，并通过行动，将之转换为能力。</p>
              <p>关于兴趣，简单来说，就是自己喜欢做什么。我喜欢追剧，我每天也在追，这是我的兴趣；我虽然手残，但我喜欢做手工，尽管没有一件成品，但并不妨碍我喜欢手工。可能我以后不一定会进入影视行业，只是继续追剧；但我可能会做跟手工相关的工作，比如策划、市场、办展这些……一切皆有可能，不要忽略自己的任何一个兴趣点。</p>
              <p> 价值观，相当于个人信奉一生的信条，其重要性不言而喻。在我的价值准则里，我应该做什么，我的底线在哪里，哪些准则不能违背，这些，都是应该考虑的因素。只有在价值观的约束下，所做的选择才不会背离自己内心的诉求，在以后的学习乃至是工作中才不会觉得无趣。所以，看似飘渺的价值观，实则对自己的每一个决策都至关重要，不容忽视。 早在辉煌灿烂的轴心时代，先贤苏格拉底就强调要“认识你自己”；文艺复兴时期，蒙田再次发声——“世界上最重要的事情就是认识自我”，足以可见认识自己的重要性。确实，只有不断向内审察自己，才能更清晰地认识自己，依据自己的特征做出合理的决策。
              </p>
            </div>
          </div>
          <div class="content swiper-slide">
            <div>
              <div class="current-num">2</div>
              <p>生涯问题和生涯规划要求个体了解自己，也需要个体对自己所处的家庭、学校和社会环境有一定了解，在实际情境中对自己的生涯做具体规划。 在高一阶段，最重要的抉择就是选科，以及规划毕业后的人生路径。 在新高考改革的背景下，语文、数学、外语作为高考科目保持不变，但传统的文理分科界限被打破，学生可以自由从政治、历史、地理、物理、化学、生物（浙江省再加上“技术”）这几门科目中，选择3门作为高考的选考科目，具体选科方法参见《解锁高考选科新姿势》，所选科目对后续志愿填报的影响可参考《新高考数据已破译》。 在直接面临的选科难题以及后续志愿填报的过程中，既要遵循个人内心的选择，更要考虑家庭、学校和社会的因素，毕竟求学生涯是短暂的，以后工作的时间要长得多，所以规划的目光要放得更长远，以免毕业找工作时又要抓瞎。
              </p>
              <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step02.png" alt="">
              <p>在选科时，首先要了解自己所在的学校有哪些选科组合可供选择，再从中择出自己感兴趣，并且不会影响高中毕业后的选择——是直接工作、上大学、还是出国。如果是直接工作，就看工作岗位对个人技能有什么要求，高中阶段的重心就是依据岗位要求培养自己的相关能力素养；如果是上大学，则要考虑拟填报大学和专业对高考选科的要求和其它要求，以及毕业后的升学或就业路径；如果是出国，除了考虑拟申请大学和修读专业外，还要达到学校要求的雅思/托福等考试的分数及其它要求。</p>
              <p> 不管毕业选择如何，在高中时都不应该只关注课本知识，更应该借助学校的各种资源、活动，提升自己的各项素质。同时，不论是高中还是以后，绝大多数学生都需要家庭给予一定的经济支持和精神鼓励，所以在做选科、择校、乃至是规划以后的职业决定时，都应该和家人一起做规划，从而获得家庭支持。此外，个人、家庭、学校都处于社会中，所以在高中时也应该探索社会这个大环境，尤其是关于就业的风向，哪些行业自己感兴趣、而且发展前景不错，甚至有国家政策支持，这些信息都应该及早关注，纳入到自己生涯规划的背景资料中。
              </p>
            </div>
          </div>
          <div class="content swiper-slide">
            <div>
              <div class="current-num">3</div>
              <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step06.png" alt="">
              <p>不仅是选科需要，就算是以后的志愿填报、深造，甚至是就业，都紧密与自己联系在一起。而且，每一个决策都至关重要，承前启后——所选科目会限制可选的学校和专业，而自己就读的学校、专业又会限制自己的升学路径，而自己所学的专业、知识势必又会限制求职范围。所以，每一个决策都不能轻率，都应该慎之又慎，最好是从一开始就有明晰的路径规划，指引自己不断向前。</p>
              <p>不管自己在哪个阶段，对未来是怎样的路径规划，都应该充分了解每条路径背后所隐藏的信息，并且理解、消化这些信息，因为每一步规划，每一次的选择都会影响自己以后的就业路向及机会。</p>
              <p> 在做知情选择时，既需要多多搜集各种各样的信息，综合自我认知以及外部探索，更需要对搜集到的信息进行整理以及实际摸索，看是否符合个人需求。
              </p>
              <p> 比如，我很喜欢某所大学的某个专业，但这个专业要求必须报考某个科目，而但这个科目我既不喜欢也不擅长，学起来不仅痛苦还拿不到什么分数；此时，我就需要警醒，这所大学的这个专业不适合我，我应该选择别的路径。
              </p>
              <p> 再比如，我很喜欢某所大学的某个专业，要求的科目对我来说也毫无压力，但这个专业毕业后的前景不是很好，或者是以后的工作类型我不喜欢；此时，我也需要警醒，这不是我想要的，以后会给我造成很大的困扰。
              </p>
              <p> 所以，只有搜集到足够丰富的资料，对以后的个人路径定出大致方向，才能做出充分知情的选择，才能不为自己以后的学业、职业生涯挖坑，才能够比较顺利地走完自己选的路，才不负自己的辛苦规划。
              </p>
            </div>
          </div>
          <div class="content swiper-slide">
            <div>
              <div class="current-num">4</div>
              <p>认识了自己，探索了外部，做出了充分知情的选择，明晰了自己的目标后，就应该是制定计划，一步一步规划自己的生涯路径了。</p>
              <p> 若想实现自己长远的生涯愿景，就需要制定长期计划，考虑自己在5~10年内需要达到的目标，并就目标制订具体可行的计划。若想达成长期目标，则必然要将目标分解成一个个中期目标，制订对应的中期计划；同理，若想实现中期目标，则必然要借助于短期目标，在完成一个个短期计划的基础上满足自己的需求。
              </p>
              <p>
              </p>
              <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step05.png" alt="">
              <p>不论是制订长期、中期、还是短期计划，都需要根据对应的目标和自己的实际情况制定切实可行的计划。</p>
              <p> 比如，我现在英语虽然很烂，但我喜欢它，我希望自己十年后是一名优秀的英语翻译，那我就可以制订一个长期计划来实现这个目标。目标太长远，不知道从哪里着手，每天祈求上天我也没成为一名优秀的英语翻译。于是，我选择自助！
              </p>
              <p> 首先，我将这个目标进行分解——不仅要在五年内具备优秀的英语听说读写能力、应变能力和胆量，还必须进入这个领域开始锤炼自己。不然，连英语翻译都不是，我怎么优秀得起来！
              </p>
              <p> 接着，以达成优秀的听说读写能力这一目标为例，我又将它分解成了更多的短期目标——具备听、说、读、写基本能力，再在此基础上不断锤炼自己。最后，以实现具备基本的“听”这一短期目标为例，我制定的计划就是每天早上背30个单词，课余时间做30分钟的听力题目，晚上听30分钟的英语新闻。
              </p>
              <p> 这么一看，似乎成为一名优秀的英语翻译也不是那么难，希望还是很大的！
              </p>
              <p> 其实，不管目标多么宏伟，哪怕感觉只是白日做梦，但只要将它逐步分解，变成一个个具体可及、可行的计划，所有的目标最终都将不再飘渺，所有的彼岸都能抵赴！
              </p>
            </div>
          </div>
          <div class="content swiper-slide">
            <div>
              <div class="current-num">5</div>
              <p>不管目标多么宏伟，或者多么简单，但若只有一纸计划，从来不付诸实践，那也无益，毕竟计划不会自己去实践，不会让目标实现。</p>
              <p> 一种情况是，订立了计划后，自己每天都沾沾自喜：计划第一天，今天才开始，还有那么久的时间，我先放松下，犒劳犒劳自己，毕竟订计划耗费了我那么多的精力。一周后，还早还早，才一个星期嘛，不用急，反正计划已经制订好了，分分钟就能完成。一个月后，计划都订好了，实现目标的途径都找到了，不差这一天两天的，还有这么长的时间来完成计划，不急不急……
              </p>
              <p> 于是，进入了自我安慰和自我麻痹的状态，什么都无所畏惧，我有计划我最厉害！
              </p>
              <p> 另一种情况是，订立了计划后，自己陷入了无限的焦虑循环状态：计划开始第二天，怎么办，我昨天的任务没开始，于是开始自责，为什么昨天没有完成计划呢？但也仅仅是自责而已，并没有想过要采取什么措施补救。一个星期后，怎么办，我上个星期的任务还没开始，我的天，我上个星期干嘛去了，于是，又开始了自责和反思，依然没有任何行动。一个月后，唉，算了吧，上个月的任务都没做，计划荒废了，还是重新做一份计划吧…… 如此循环往复，计划做了一份又一份，只是计划永远只是计划，从来没有实操过。
              </p>
              <p> 所以，正解是：按照计划，一步一个脚印，不断实践，达成一个又一个的目标！否则，计划不仅无用，反而会成为绊脚石，阻碍自己实践，抑制自己能力、素养的发展。
              </p>
            </div>
          </div>
          <div class="content swiper-slide">
            <div>
              <div class="current-num">6</div>
              <p>不论自己在心里演练得多么完美，不论计划多么完备，但总有自己漏掉的地方，总有意外发生，所以永远和实际有出入，这时，就需要依据现实调整自己的计划了。</p>
              <p> 比如，我原本计划每天早上背30个单词，课余时间做30分钟的听力题目，晚上听30分钟的英语新闻，按照我的设想，我应该有充分时间来进行这项计划。但这个星期，甚至是这个月，学生会要筹备一项大型活动，部门老大给了我很多任务，于是，课余时间要找老师做采访、录视频，晚上要写访谈稿、约老师、剪视频、采访同学、整理资料，还要确定拟采购的物资，还要实际采购物资……
              </p>
              <p> 这么一来，我原本的计划全部被打乱，计划难以进行，于是，就需要根据实际情况进行调整——听听力的计划可以保持不变，但是要压缩自己其它娱乐休闲的时间；最近精力消耗太大，早上起不来，单词集中到周末背，或者下周、下个月多背一点；课间基本没时间，也静不下心来做听力题了，也挪到周末吧。
              </p>
              <p> 所以，虽然出现了突发状况，但我对计划略作了变更，并没有耽误计划的进行，这就是一个正向的反馈调整过程。
              </p>
              <p> 在实践计划的过程中，总会遇到各种各样的情况，此时，不应该焦虑，而是要冷静，思考自己遇到了什么问题，并尝试提出解决方案，调整计划。所以，没有最优计划，只有更符合实际、更佳的计划，这就需要再执行计划时不断反馈、调整。
              </p>
              <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step04.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
export default {
  layout: 'default',
  data () {
    return {
      currentStep: 0,
      plainData: [{
        index: 1,
        name: '认识自己',
        isActive: true,
        content: '探究清楚自己的能力、兴趣与价值观'
      }, {
        index: 2,
        name: '外部探索',
        isActive: false,
        content: '在实际情境中对自己的生涯做具体规划'
      }, {
        index: 3,
        name: '知情选择',
        isActive: false,
        content: '充分了解每条路径背后所隐藏的信息，并且理解、消化这些信息'
      }, {
        index: 4,
        name: '订立计划',
        isActive: false,
        content: '制定计划，一步一步规划自己的生涯路径'
      }, {
        index: 5,
        name: '实践计划',
        isActive: false,
        content: '按照计划，一步一个脚印，不断实践，达成一个又一个的目标！'
      }, {
        index: 6,
        name: '反馈调整',
        isActive: false,
        content: '没有最优计划，只有更符合实际、更佳的计划，这就需要再执行计划时不断反馈、调整'
      }],
      content: '',
      swiperOption: {
        notNextTick: true,
        /* autoplay: {
          disableOnInteraction: false
        }, */
        loop: true,
        effect: 'fade',
        autoplayDisableOnInteraction: false,
        direction: 'horizontal',
        on: {
          transitionStart: () => {
            if (this.$refs['mySwiper'].swiper.activeIndex > 6) {
              this.currentStep = 1
            } else {
              this.currentStep = this.$refs['mySwiper'].swiper.activeIndex
            }
          }
        }
      }
    }
  },
  methods: {
    enter (index) {
      this.currentStep = index + 1
      this.mySwiper.slideTo(this.currentStep, 1000, true)
    }
  },
  mounted () {
    this.currentStep = this.$route.query.id
    this.$refs['mySwiper'].swiper.activeIndex = this.currentStep
  }
}
</script>
<style lang="scss" scoped>
.page {
  margin-top: 50px;
  min-width: 1200px;
  width: 100%;
  overflow: hidden;
}
.banner {
  position: relative;
  background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/banner_1.jpg") no-repeat center;
  background-size: cover;
  min-width: 1200px;
  width: 100%;
  background-color: $stable;
  height: 340px;
  .banner-text {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    // color: #4F5359;
    color: $light;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h2 {
      font-size: 48px;
    }
  }
}
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0 0;
  .step-process {
    display: flex;
    justify-content: center;
    border-bottom: 10px solid #f6f6f6;
    border-radius: 5px;
    height: 79px;
    .step {
      position: relative;
      width: 170px;
      .step-num {
        position: absolute;
        font-size: 64px;
        top: -30px;
        left: -10px;
        z-index: -100;
        color: #f6f6f6;
      }
      .title {
        margin-top: 10px;
        margin-bottom: 20px;
        opacity: 1;
        transition: all linear 0.5s;
      }
      .active-title {
        transition: all linear 0.5s;
        position: absolute;
        display: inline;
        font-size: 36px;
        top: 100px;
        opacity: 0;
      }
    }
    .current-step {
      position: relative;
      .title {
        opacity: 0;
      }
      .active-title {
        opacity: 1;
      }
    }
  }
  .content {
    width: 100%;
    margin-top: 200px;
    position: relative;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .current-num {
        position: absolute;
        color: $energized;
        opacity: 0.25;
        font-size: 288px;
        left: 0px;
        top: -200px;
        z-index: -200;
      }
      p {
        mix-blend-mode: color-dodge;
        font-size: $size16;
        line-height: 28px;
        letter-spacing: 2px;
        text-align: justify;
        // text-indent: 20px;
        &:not(:last-child) {
          margin-bottom: 20px;
        }
      }
      img {
        margin: 10px 0;
        align-self: center;
      }
    }
  }
  .swiper-slide {
    > div {
      opacity: 0;
      > .current-num {
        display: none;
      }
    }
  }
  .swiper-slide-active {
    > div {
      opacity: 1;
      > .current-num {
        display: inline;
      }
    }
  }
}
.title {
  font-size: $size16;
  color: #5c5c5c;
}
.circle {
  cursor: pointer;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -35px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background: transparent;
    border: 7px $energized solid;
  }
}
</style>
